<!--
 * @Description: 缺陷部位列表
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 16:00:44
 * @LastEditTime: 2021-07-01 12:44:13
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="app-container v-flex">
    <filter-form :form="listQuery" :data="filterData" @search="search" @addForm="addForm" />
    <div ref="main" class="v-flex-elastic">
      <base-table
        :height="height"
        :loading="listLoading"
        :data="tableData"
        :columns="columns"
        show-filter-column
        operaton-width="150px"
        @view="view"
        @updateForm="updateForm"
        @deleteData="deleteData">
        <template slot="operations" slot-scope="{row, $index}">
          <!-- v-permission-button="publicConfig['ITPS-KANBAN']" -->
          <el-button
            title="上移"
            :disabled="$index==0"
            size="mini"
            icon="el-icon-sort-up"
            @click="changeSort(row, $index, 'up')" />
          <el-button
            title="下移"
            :disabled="$index==tableData.length-1"
            size="mini"
            icon="el-icon-sort-down"
            @click="changeSort(row, $index, 'down')" />
        </template>
      </base-table>
    </div>
    <div class="page-box">
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getListPage" />
    </div>
    <!-- 新增或编辑弹框 -->
    <DataAddOrEdit :dialog="dialog" @updateData="updateData" />
    <!-- 查看 -->
    <DataLook :dialog="dialog" :dialog-look="dialogLook" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { tableMixin } from '@/utils/public'
import DataAddOrEdit from './DataAddOrEdit'
import DataLook from './DataLook'
import { findManageUnitDeptList } from '@/api/main'
import { getListPage, updateOrEditData, deleteData, changeSort } from '@/api/jcwwtk/position'
export default {
  name: 'JCWWTKPosition',
  components: { DataAddOrEdit, DataLook },
  mixins: [tableMixin],
  data() {
    return {
      listQuery: {
        page: 1,
        size: 10,
        deptCode: '',
        keyWord: ''
      },
      total: 0,
      height: 0,
      listLoading: false,
      tableData: [],
      columns: [
        // { label: '所属单位', prop: 'shortName' },
        { label: '部位名称', prop: 'positionName' },
        { label: '部位编号', prop: 'positionCode' },
        { label: '部位描述', prop: 'description' },
        { label: '上级部位', prop: 'parentName' }
      ],
      filterData: {
        // deptCode: {
        //   key: 'deptCode',
        //   type: 'select',
        //   title: '所属单位',
        //   placeholder: '所属单位',
        //   options: [],
        //   props: { label: 'deptName', value: 'unitDeptCode' }
        // },
        keyWord: {
          key: 'keyWord',
          type: 'input',
          placeholder: '部位名称/编号'
        }
      },
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        form: {
          status: 1,
          delFlag: 0,
          parentId: 0,
          deptCode: ''
        },
        initForm: {
          status: 1,
          delFlag: 0,
          parentId: 0,
          parentName: '',
          deptCode: ''
        },
        dataList: {
          positionList: []
        },
        rules: {
          positionName: [
            { required: true, message: '部位名称不能为空', trigger: 'blur' }
          ],
          positionCode: [
            { required: true, message: '部位编号不能为空', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '部位描述不能为空', trigger: 'blur' }
          ]
        }
      },
      dialogLook: {
        visible: false
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.listQuery.deptCode = this.userInfo.unitDeptCode
  },
  created() {
    this.getList()
    this.getListPage()
  },
  methods: {
    // 数据切换顺序
    changeSort(row, index, type) {
      console.log(row, index, type)
      var param = {
        id: row.id,
        changeId: ''
      }
      if (type === 'up') {
        param.changeId = this.tableData[index - 1].id
      } else {
        param.changeId = this.tableData[index + 1].id
      }
      changeSort(param)
        .then((response) => {
          if (type === 'up') {
            this.tableData[index] = this.tableData.splice(index - 1, 1, this.tableData[index])[0]
            this.notifiySuccess('上移成功')
          } else {
            this.tableData[index] = this.tableData.splice(index + 1, 1, this.tableData[index])[0]
            this.notifiySuccess('下移成功')
          }
        })
    },
    // 下拉数据获取
    getList() {
      // 获取所有单位数据
      findManageUnitDeptList()
        .then(response => {
          this.filterData['deptCode'].options = response.data
        })
        .catch(_ => {})
    },
    // 新增
    addForm() {
      const dialog = {
        title: '新增缺陷部位',
        type: 'add',
        visible: true,
        disabled: false,
        loading: false,
        form: JSON.parse(JSON.stringify(this.dialog.initForm))
      }
      dialog.form.deptCode = this.userInfo.deptCode
      this.dialog = Object.assign(this.dialog, dialog)
    },
    // 编辑
    updateForm(row, index) {
      this.currentRow = [row]
      const dialog = {
        title: '编辑缺陷部位',
        type: 'edit',
        visible: true,
        disabled: false,
        loading: false,
        form: JSON.parse(JSON.stringify(row))
      }
      dialog.form.deptCode = this.userInfo.deptCode
      this.dialog = Object.assign(this.dialog, dialog)
    },
    view(row, index) { // 查看
      this.currentRow = [row]
      const dialog = {
        title: '查看缺陷部位',
        type: 'look',
        visible: false,
        disabled: false,
        loading: false,
        form: JSON.parse(JSON.stringify(row))
      }
      this.dialog = Object.assign(this.dialog, dialog)
      this.dialogLook.visible = true
    },
    // 查询
    search() {
      this.listQuery.page = 1
      this.getListPage()
    },
    // 列表查询
    getListPage() {
      this.listLoading = true
      getListPage(this.listQuery)
        .then((response) => {
          this.tableData = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
        .catch((_) => {
          this.listLoading = false
        })
    },
    // 新增或编辑弹框$emit 回调方法
    updateData(formData) {
      updateOrEditData(formData)
        .then((response) => {
          this.currentRow = [response.data]
          if (this.dialog.type === 'add') {
            this.tableData.unshift(this.currentRow[0])
            this.total++
            this.notifiySuccess('添加成功')
            var dialog = this.dialog
            dialog.form.id = response.data.id
            this.dialog = Object.assign(this.dialog, dialog)
          } else {
            // const index = this.tableData.findIndex(
            //   (item) => item.id === this.currentRow[0].id
            // )
            // this.tableData.splice(
            //   index,
            //   1,
            //   JSON.parse(JSON.stringify(this.currentRow[0]))
            // )
            // this.$forceUpdate()
            this.notifiySuccess('保存成功')
            this.getListPage()
          }
          this.dialog.loading = false
          this.dialog.visible = false
        })
        .catch((_) => {
          this.dialog.loading = false
        })
    },
    // 删除
    deleteData(row, index) {
      this.confirmBox(`确定删除【${row.positionName}】这条数据?`)
        .then(() => {
          deleteData(row.id).then(response => {
            this.notifiySuccess('删除成功!')
            this.getListPage()
          })
        })
        .catch(() => {})
    }
  }
}
</script>

